<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-image: linear-gradient(45deg, rgb(255, 166, 0) 50%, rgb(0, 204, 255) 50%);
            }
            body::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0px;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(135deg, rgb(110, 224, 125) 50%, transparent 50%);
                z-index: -1;
            }
            .clock {
                width: 400px;
                height: 400px;
                background-image: url(clock.png);
                background-size: 100% 100%;
                box-shadow: inset 0 0px 10px 6px rgba(255, 255, 255, 0.5), 0 0px 25px rgba(255, 255, 255, 0.5);
                border-radius: 50%;
                border: 2px solid rgba(255, 255, 255, 0.8);
                background-color: rgba(255, 255, 255, 0.2);

                backdrop-filter: blur(15px);/* 后面区域模糊 */

                position: relative;
            }
            /* 用伪类给时钟外边再加一层圆圈 */
            .clock::before {
                content: '';
                position: absolute;
                top: -30px;
                left: -30px;
                bottom: -30px;
                right: -30px;
                border: 2px solid rgba(255, 255, 255, 0.8);
                box-shadow: inset 0 0px 25px rgba(53, 52, 52, 0.5), 0 0px 10px rgba(255, 255, 255, 0.5);
                border-radius: 50%;
            }
            /* 用伪类为时钟添加中间那个小圆点 */
            .clock::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 20px;
                height: 20px;
                transform: translate(-50%, -50%);
                background-color: rgb(255, 255, 255);
                border-radius: 50%;
                z-index: 3;

                border: 2px solid rgb(79, 146, 96);
            }
            .hour {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 16px;
                height: 170px;
                background-image: linear-gradient(360deg, transparent 50%, rgb(255, 153, 0) 50%);
                transform: translate(-50%, -50%);
                border-radius: 8px;
                transform-origin: center;
            }
            .min {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 10px;
                height: 250px;
                background-image: linear-gradient(360deg, transparent 50%, rgb(0, 183, 255) 50%);
                transform: translate(-50%, -50%);
                border-radius: 5px;
                z-index: 1;
                transform-origin: center;
            }
            .sec {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 6px;
                height: 300px;
                background-image: linear-gradient(360deg, transparent 30%, rgb(237, 243, 235) 30%);
                transform: translate(-50%, -50%);
                border-radius: 3px;
                z-index: 2;
                transform-origin: center;
            }
        </style>
    </head>
    <body>
        <!-- 定义盒子，.clock是整个钟，.hour是时针，min是分针，sec是秒针 -->
        <div class="clock">
            <div class="hour"></div>
            <div class="min"></div>
            <div class="sec"></div>
        </div>

        <script>
            var hour = document.querySelector('.hour');
            var min = document.querySelector('.min');
            var sec = document.querySelector('.sec');

            window.setInterval(function () {
                let shijian = new Date();//当前的实时时间
                let shi = shijian.getHours() * 30;
                let fen = shijian.getMinutes() * 6;
                let miao = shijian.getSeconds() * 6;
                hour.style.transform = `translate(-50%,-50%) rotateZ(${shi + shijian.getMinutes() * 0.5}deg)`;
                min.style.transform = `translate(-50%,-50%) rotateZ(${fen}deg)`;
                sec.style.transform = `translate(-50%,-50%) rotateZ(${miao}deg)`;
            }, 1000);

            /*  alert(shijian.getHours()); */
            /*  alert(shijian.getMinutes());  */
            /*  alert(shijian.getSeconds());  */
        </script>
    </body>
</html>
